<div class="style-panel">
    <div class="farris-group-wrap property-item">
        <div class="form-group farris-form-group">
            <label class="col-form-label mb-0">
                <div class="wrap" (click)="onChangeBackgroundDetailPanel()">
                    <span class="f-icon f-icon-arrow-60-right mr-1" *ngIf="!showBackgroundDetail"> </span>
                    <span class="f-icon f-icon-arrow-60-down mr-1" *ngIf="showBackgroundDetail"> </span>
                    <span class="farris-label-text">背景色</span>
                </div>
            </label>
            <div class="component">
                <div class="farris-input-wrap">
                    <farris-combo-list [(ngModel)]="actualType" [idField]="'value'" [textField]="'text'"
                        [data]="typeList" [editable]="false" [multiSelect]="false" [enableClear]="false"
                        [enableCancelSelected]="false" [nosearch]="false" (ngModelChange)="onChangeType()">
                    </farris-combo-list>
                </div>
            </div>
        </div>
    </div>
    <div class="farris-group-wrap property-item detail-panel" [hidden]="!showBackgroundDetail">
        <div class="form-group farris-form-group">
            <label class="col-form-label mb-0">
                <div class="wrap">
                    <span class="farris-label-text">自定义</span>
                </div>
            </label>
            <div class="component">
                <div class="farris-input-wrap">
                    <colorpicker-plus [elementConfig]="elementConfig" [presets]="presetColors"
                        (valueChanged)="onChangeCustomColor($event)"></colorpicker-plus>
                </div>
            </div>
        </div>
    </div>
</div>